<template>
  <div class="container">
    <div class="title">
      <span :style="comStyle" @click="showSelect = true">▎{{selectName}}</span>
      <span :style="comStyle" class="iconfont title-icon" @click="showSelect = true">&#xe6eb;</span>
      <div class="select-con" v-show="showSelect">
        <div :style="comStyle" @click="handleSelect(item.key)" class="select-item" v-for="item in selectList" :key="item.key">
          {{ item.text }}
        </div>
       
      </div>
    </div>
    <div class="trend-box" ref="trendBox"></div>
  </div>
 
</template>

<script lang="ts">
import { defineComponent, onUnmounted, onMounted, ref, computed, useContext } from 'vue'
import { useTrend } from '../hooks'
import { useStore } from 'vuex'
import { getThemeValue } from '../utils/theme_utils'
import WebSocketSerivce from '../utils/socket_service'
type IIdata = {
  name: string,
  data: number[]
}
type commodity = {
  title: string
  base: number,
  data: IIdata[]
  unit: string
}
interface Type {
  key: string
  text: string
}
type Common = {
  month: string[]
}
interface IData {
  commodity: commodity
  map: commodity
  seller: commodity
  type: Type[]
  common: Common
}

export default defineComponent({
    name: 'trend',
    setup() {
      const store = useStore()
      const trendBox = ref<HTMLElement>(null)
      const data = ref<IData[]>([])
      const showSelect = ref<boolean>(false)
      const selectType = ref<string>('map')
      const titleFontSize = ref<number>(0)
      const { charts, initChart, getData, updateChart, screenAdapter} = useTrend(trendBox, data, selectType, titleFontSize)
      // 可选列表
      const selectList = computed(() => {
        return data.value['type'] && data.value['type'].filter(item => item.key !== selectType.value)
      })
      // 已选标题
      const selectName = computed(() => {
        return data.value['type'] && data.value['type'].find(item => item.key === selectType.value)['text']
      })
      // 设置给标题的样式
      const comStyle = computed(() => {
        return {       
          fontSize: titleFontSize.value  + 'px',
          color: getThemeValue(store.state.theme).titleColor
        }
      })     

      const { expose } = useContext()
      expose({
        screenAdapter
      })

      onMounted(async () => {
        WebSocketSerivce.instance.registerCallBack('trendData', getData)
        initChart()
        // await getData()
        WebSocketSerivce.instance.send({
          action: 'getData',
          socketType: 'trendData',
          chartName: 'trend',
          value: false
        })
        window.addEventListener('resize', screenAdapter)
        // 初始化图表尺寸
        screenAdapter()
      })

      onUnmounted(() => {
        WebSocketSerivce.instance.unRegisterCallBack('trendData')
        window.removeEventListener('resize', screenAdapter)
      })

      const handleSelect = (key:string) => {
        selectType.value = key
        updateChart()
        showSelect.value = false
      }
      return {
        trendBox,
        selectList,
        showSelect,
        handleSelect,
        selectName,
        comStyle
      }
    }
})
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .title {
    position: absolute;
    left: 20px;
    top: 20px;
    z-index: 10;
    color: white;
    cursor: pointer;
    .title-icon {
      margin-left: 15px; 
    }
    .select-con {
      margin-left: 15px;
      .select-item {
        cursor: pointer;
      }
    }
  }
  .trend-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
}

</style>
